<template>
	<view class="item flex flex-column" :class="collection?'item-act':''">
		<view class="shang flex justify-between">
			<text class="it">{{item.positionName}}</text>
			<text class="money" :class="collection?'active':''"> {{item.positionLower}}k - {{item.positionUpper}}k</text>
		</view>
		<view style="height: 30rpx;">

		</view>
		<view class="zhong flex justify-between">
			<text class="company" v-if="companyShow">{{item.companyName}}</text>
			<view class="city flex justify-center align-center">
				<text style="margin-right: 30rpx;">{{item.companyCity}}</text>
				<text>{{item.positionArea}}</text>
			</view>
		</view>
		<view style="height: 30rpx;">

		</view>
		<view class="xia"v-if="li != 1">
			<view class="label flex justify-between">
				<view class="label-item">
					<text v-for="it in item.companyTreatmentList" :key="it.id">{{it}}</text>
				</view>
				<view v-if="!collection" class="icon flex">
					<view class="shoucang" @click.stop="collect(item)">
						<image v-if="!show" src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shoucang.png" mode=""
							lazy-load></image>
						<image v-if="show" src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/shoucang-active.png" mode=""
							lazy-load></image>
					</view>
					<button class="fenxiang flex justify-center align-center"  @click.stop="share">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/chance/fenxiang.png"
						lazy-load></image>
					</button>
				</view>
			</view>
		</view>
		<!-- <view v-if="collection" class="user flex align-center">
			<view class="imgsss">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/%E7%81%B0%E5%A4%AA%E7%8B%BC.jpg" mode=""></image>
			</view>
			<view class="name">
				郑女士
			</view>
		</view>
		<view v-if="collection" class="date">
			2021年5月6日 11:11
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "list",
		props:{
			item: Object,
			collection: {
				type: Boolean,
				default: false
			},
			companyShow: Boolean,
			li:Number
		},
		data() {
			return {
				collectQurey:{
					positionListId:Number
				},
				show: this.item.collectionStatus,
			};
		},
		methods:{
			//收藏点击
			async collect(item){
				if(uni.getStorageSync('openId')){
					this.collectQurey.positionListId = item.positionListId
					let {code} = await this.$post('/positionList/save',this.collectQurey)
					if(code == 200){
						this.show = !this.show
					}
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
				
			},
			share(){
				this.$emit('share',this.item)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 40rpx 30rpx;
		.shang {
			.it {
				font-weight: bold;
				color: #333333;
				font-size: 36rpx;
				line-height: 1;
			}

			.money {
				font-weight: 500;
				color: #0265EB;
				font-size: 36rpx;
				line-height: 1;
			}
			.active{
				color: #FF370F !important;
			}
		}

		.zhong {
			font-size: 24rpx;

			.company {
				color: #333333;
				line-height: 1;
			}

			.city {
				color: #666666;
				line-height: 1;
			}
		}

		.xia {

			.label {
				.label-item {
					text {
						font-weight: 400;
						color: #666666;
						height: 49rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						padding: 8rpx 13rpx;
						font-size: 22rpx;
						margin-left: 10rpx;
					}
					text:first-child{
						margin-left: 0;
					}
				}

				.icon {
					button::after{
						border: 0;
						padding: 0;
						margin: 0;
						
					}
					.shoucang {
						width: 40rpx;
						height: 40rpx;
						margin-right: 30rpx;
					}

					.fenxiang {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.user{
			width: 690rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid rgba(0,0,0,.12);
			.imgsss{
				width: 62rpx;
				height: 63rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.name{
				font-weight: 400;
				color: #333333;
				font-size: 28rpx;
			}
		}
		.date{
			padding: 20rpx 0;
			font-weight: 400;
			color: #999999;
			font-size: 22rpx;
		}
	}
	.item-act{
		padding: 30rpx 30rpx 30rpx !important;
	}
</style>
